

.pageWrapper {
  background-color: #F9FAFB;
  min-height: 100vh;
}

.sidebarTransition {
  transition: width 0.3s ease-in-out;
}

.navItemActive {
  background-color: #EEF2FF;
  color: #4F46E5;
  border-right: 3px solid #4F46E5;
}

.navItem:hover {
  background-color: #F3F4F6;
  color: #4F46E5;
}

.formInputFocus:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.avatarUpload:hover {
  background-color: #F3F4F6;
  cursor: pointer;
}

.saveSuccess {
  animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
  0%, 100% { 
    opacity: 0; 
    transform: translateY(-10px); 
  }
  10%, 90% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

